<style scoped>
    .dogo-upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        margin-right: 4px;
        float: left;
    }

    .dogo-upload-list img {
        width: 100%;
        height: 100%;
    }

    .dogo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
    }

    .dogo-upload-list:hover .dogo-upload-list-cover {
        display: block;
    }

    .dogo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }

    .dogo-upload-btn {
        display: block;
        width: 58px;
        height: 58px;
        float: left;
    }

    .upload-btn {
        border: 1px dashed #ddd;
        width: 58px;
        height: 58px;
        text-align: center;
        line-height: 58px;
        display: inline-block;
        cursor: pointer;
        border-radius: 4px;
    }

    .upload-btn:hover {
        border: 1px dashed #2d8cf0;
    }
</style>
<template>
    <div class="dogo-box">
        <div class="dogo-upload-list" v-for="(item,index) in uploadList">
            <div v-if="item.status === 'finished'">
                <img :src="item.url">
                <div class="dogo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
                    <Icon v-if="is_check!='check'" type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
                </div>
            </div>
            <div v-else>
                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
            </div>
        </div>
        <Upload
                v-show="!uploadList.length"
                ref="upload"
                :show-upload-list="false"
                :default-file-list="parent_file_list"
                :format="format"
                :headers="headers"
                :on-success="handleSuccess"
                :on-remove="handleRemove"
                :on-error="handleError"
                :on-progress="handleProgress"
                :on-format-error="handleFormatError"
                :action="actionUrl"
                :max-size="2048"
                class="dogo-upload-btn">
            <div class="upload-btn">
                <Icon type="camera" size="20"></Icon>
            </div>
        </Upload>
        <Modal title="预览" v-model="visible">
            <img :src="imgName" v-if="visible" style="width: 100%">
        </Modal>
    </div>
</template>

<script>
    import config from '@/utils/config';
    import config_api from '@/utils/config_api.js';
    import {get_local_user_token} from '@/utils/config_common';

    export default {
        name: 'upload_image',
        //接收父组件传值到本组件
        props: {
            parent_file_list: Object(),
            is_check: ''
        },
        data () {
            return {
                host: config.api_host,
                headers: {},
                datas: {},
                actionUrl: '',
                format: '',
                defaultList: [],
                imgName: '',
                visible: false,
                uploadList: []
            };
        },
        created () {
            var dogoThis = this;
            //设置头部
            dogoThis.headers = {
                Authorization: get_local_user_token()
            };
            //设置上传地址
            dogoThis.actionUrl = config.api_host + config_api.manage_upload_file.url;
            //上传类型
            dogoThis.format = ['jpg', 'jpeg', 'png'];
        },
        methods: {
            get_parent_file_list (val) {
                var dogoThis = this;
                dogoThis.uploadList = val;
            },
            handleView (name) {
                this.imgName = name;
                this.visible = true;
            },
            handleRemove (index) {
                var dogoThis = this;
                dogoThis.$Modal.confirm({
                    title: '提示窗口',
                    content: `<p>确定要删除吗？</p>`,
                    onOk: () => {
                        const uploadList = dogoThis.uploadList;
                        uploadList.splice(index, 1);
                        dogoThis.$emit('listenChildRemoveFileEvent', index);
                    },
                    onCancel: () => {
                    }
                });
            },
            handleProgress (e, file) {
                // console.log('eee',e);
            },
            handleError (e, file, fileList) {
                //   console.log(e, file,fileList)
            },
            handleSuccess (res, file, fileList) {
                this.$Message.success('图片上传成功');
                /**-------Ayan-------- */
                this.$emit('listenChildUploadFilelist', fileList);
                /**-------Ayan END-------- */
                var dogoThis = this;
                for (var i = 0; i < fileList.length; i++) {
                    // console.log((fileList[i]));
                    if (fileList[i].hasOwnProperty('response')) {
                        var url = fileList[i].response.result.file_path;
                        fileList[i].url = url;
                        dogoThis.$emit(
                            'listenChildUploadFileEvent',
                            fileList[i].response.result
                        );
                    }
                }
                dogoThis.get_parent_file_list(fileList);
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: 'The file format is incorrect',
                    desc:
                    'File format of ' +
                    file.name +
                    ' is incorrect, please select jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: 'Exceeding file size limit',
                    desc: 'File  ' + file.name + ' is too large, no more than 2M.'
                });
            },
            handleBeforeUpload () {

            }
        },
        mounted () {
            //这里用于处理上传后，再次挂载
            this.uploadList = this.$refs.upload.fileList;
        },
        watch: {
            parent_file_list: function (val) {
                var dogoThis = this;
                dogoThis.get_parent_file_list(val);
            }
        }
    };
</script>
